import React, {Component} from 'react';
import {Flex, Button, Modal} from 'antd-mobile';

class PlateKeyboard extends Component {

    render() {
        const {visible, selectCallback, inputType, closeSelect, fallback} = this.props;
        return ( <Modal
                popup
                visible={visible}
                animationType="slide-up"
            >
                <div style={{
                    width: '100%',
                    height: '40px',
                    lineHeight: '40px',
                    textAlign: 'right',
                    color: '#D49C2E',
                    backgroundColor: '#F7F7F7',
                    borderTop: '1.5px solid #C4C8CB'
                }}>
                    <div style={{marginRight: '10px'}} onClick={() => closeSelect()}>关闭</div>
                </div>
                {inputType === 0 ?
                    <div className="keyboard" style={{backgroundColor: '#CED3D9', padding: '8px 0'}}>
                        <Flex style={{padding: '1px'}}>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('京')}>京</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('津')}>津</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('沪')}>沪</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('渝')}>渝</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('冀')}>冀</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('豫')}>豫</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('云')}>云</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('辽')}>辽</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('黑')}>黑</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('湘')}>湘</Button>
                            </Flex.Item>
                        </Flex>
                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item style={{flex: '0.5'}}>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('皖')}>皖</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('鲁')}>鲁</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('新')}>新</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('苏')}>苏</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('浙')}>浙</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('赣')}>赣</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('鄂')}>鄂</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('桂')}>桂</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('甘')}>甘</Button>
                            </Flex.Item>
                            <Flex.Item style={{flex: '0.5'}}>
                            </Flex.Item>
                        </Flex>
                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('晋')}>晋</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('蒙')}>蒙</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('陕')}>陕</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('吉')}>吉</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('闽')}>闽</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('贵')}>贵</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('粤')}>粤</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('青')}>青</Button>
                            </Flex.Item>
                            <Flex.Item>
                            </Flex.Item>
                        </Flex>
                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item style={{flex: '2.5'}}>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('藏')}>藏</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('川')}>川</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('宁')}>宁</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('琼')}>琼</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('使')}>使</Button>
                            </Flex.Item>
                            <Flex.Item>
                            </Flex.Item>
                            <Flex.Item style={{flex: '1.5'}}>
                                <Button>⇦</Button>
                            </Flex.Item>
                        </Flex>
                    </div>
                    :
                    <div className="keyboard" style={{backgroundColor: '#CED3D9', padding: '8px 0'}}>
                        <Flex style={{padding: '1px'}}>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('1')} disabled={inputType === 1}>1</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('2')} disabled={inputType === 1}>2</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('3')} disabled={inputType === 1}>3</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('4')} disabled={inputType === 1}>4</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('5')} disabled={inputType === 1}>5</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('6')} disabled={inputType === 1}>6</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('7')} disabled={inputType === 1}>7</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('8')} disabled={inputType === 1}>8</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('9')} disabled={inputType === 1}>9</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('0')} disabled={inputType === 1}>0</Button>
                            </Flex.Item>
                        </Flex>

                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('A')}>A</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('B')}>B</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('C')}>C</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('D')}>D</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('E')}>E</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('F')}>F</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('G')}>G</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('H')}>H</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('J')}>J</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('K')}>K</Button>
                            </Flex.Item>
                        </Flex>
                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('L')}>L</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('M')}>M</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('N')}>N</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('P')}>P</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('Q')}>Q</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('R')}>R</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('S')}>S</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('T')}>T</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('U')}>U</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('V')}>V</Button>
                            </Flex.Item>
                        </Flex>

                        <Flex style={{padding: '1px', marginTop: '5px'}}>
                            <Flex.Item style={{flex: '0.5'}}>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('W')}>W</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('X')}>X</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('Y')}>Y</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('Z')}>Z</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('港')} disabled={inputType < 6}>港</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('澳')} disabled={inputType < 6}>澳</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('学')} disabled={inputType < 6}>学</Button>
                            </Flex.Item>
                            <Flex.Item>
                                <Button onClick={() => selectCallback('领')} disabled={inputType < 6}>领</Button>
                            </Flex.Item>
                            <Flex.Item style={{flex: '1.5'}}>
                                <Button onClick={() => fallback()}>⇦</Button>
                            </Flex.Item>
                        </Flex>
                    </div>}

                <style>
                    {`
                        .am-modal-mask {
                            background-color: transparent;
                            min-height: 60%;
                            height: auto;
                            top: auto;
                        }
                        .am-modal-wrap {
                            min-height: 60%;
                            height: auto;
                            top: auto;
                        }
                        .keyboard .am-flexbox .am-flexbox-item {
                            margin-left: 2px;
                        }
                    `}
                </style>
            </Modal>
        );
    }
}

export default PlateKeyboard;